<template>
	<view class="container">
		<view class="years" v-for="(item,index) in years" :key="index">
			<view class="title">—— {{item.year}} ——</view>
			<view class="months" >
				<view v-for="(item1,index1) in item.list" :key="index1">
					<view :class="{'show': item1.show, 'active': item1.select}" class="mDiv" @click="selectDate(item1.month)">
						<view class="tip">{{item1.name}}</view>
						<view class="num">￥{{item1.amount==0?'0.00':item1.amount}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
			getMyBalanceMonthsApi
		} from '@/api/user.js';
	export default {
		data() {
			return {
				selectY: '',	//选中年
				selectM: '',	//选中月
				nowY:　'',		//当前年
				nowM: '',		//当前月
				years: [],		//显示列表
				list: [],		//列表
				date: '',		//返回选择时间
				type: '',		//数据查询类型
			}
		},
		onLoad(option) {
			let that = this;
			if(option.date!=null&&option.date!=''){
				that.date = option.date;
				that.selectY = option.date.split('-')[0];
				that.selectM = option.date.split('-')[1];
			}
			
			that.type = option.type;
			
			that.getMonthsList();
		},
		methods: {
			getMonthsList() {
				let that = this;
				getMyBalanceMonthsApi({type: that.type}).then(res => {
					that.list = res.data;
					
					that.initDate();
				})
			},
			initDate() {
				let that = this;
				that.years = [];
				
				//设置当前时间
				const dateObj = new Date();
				that.nowY = dateObj.getFullYear(); // 获取当前年份
				that.nowM = ("0" + (dateObj.getMonth() + 1)).slice(-2); // 获取当前月份，其中需要将月份加1，因为月份是从0开始计数的
				
				//确认选中年月
				if(that.date==""){
					that.selectY = that.nowY;
					that.selectM = that.nowM;
				}
				
				//初始化年月列表
				if(that.nowM == 12 || that.nowM == "12"){
					let month = {};
					month.year = that.nowY;
					//初始化月列表
					let months = [];
					for(let i=0; i<=12; i++){
						var item = {};
						var j = i+1;
						var m = j<10?"0"+j:""+j;
						item.month = ""+month.year+m;
						item.name = that.exMonthName(item.month);
						item.show = true;
						item.amount = that.list[i].amount;
						if (item.month==(""+that.selectY+that.selectM)){
							item.select = true;
						}
						months.push(item);
					}
					month.list = months;
					that.years.push(month);
				}else{
					let month1 = {};
					let month2 = {};
					let months1 = [];
					let months2 = [];
					month1.year = 0+that.nowY-1;
					month2.year = 0+that.nowY;
					
					var count = 11 - that.nowM;
					var yc = 0;
					for(let i=0; i<24; i++){
						var item = {};
						if(i<12){
							var j = i+1;
							var m = j<10?"0"+j:""+j;
							item.month = ""+month1.year+m;
							if (count+j==12){
								item.show = true;
								item.amount = that.list[yc].amount;
								yc++;
								count--;
							}else{
								item.show = false;
								item.amount = 0;
							}
						}else{
							var j = i-12+1;
							var m = j<10?"0"+j:""+j;
							item.month = ""+month2.year+m;
							if (j<=that.nowM){
								item.show = true;
								item.amount = that.list[yc].amount;
							}else{
								item.show = false;
								item.amount = 0;
							}
						}
						item.name = that.exMonthName(item.month)
						if (item.month==(""+that.selectY+that.selectM)){
							item.select = true;
						}
		
						if(i<12){
							months1.push(item);
						}else{
							months2.push(item);
						}
					}
					month1.list = months1;
					month2.list = months2;
					that.years.push(month1);
					that.years.push(month2);
				}
			},
			exMonthName(str) {
				let sb = str.substring(4,6);
				let sbStr = "";
				if (sb=="01"){
					sbStr = "一月"
				}else if (sb=="02"){
					sbStr = "二月"
				}else if (sb=="03"){
					sbStr = "三月"
				}else if (sb=="04"){
					sbStr = "四月"
				}else if (sb=="05"){
					sbStr = "五月"
				}else if (sb=="06"){
					sbStr = "六月"
				}else if (sb=="07"){
					sbStr = "七月"
				}else if (sb=="08"){
					sbStr = "八月"
				}else if (sb=="09"){
					sbStr = "九月"
				}else if (sb=="10"){
					sbStr = "十月"
				}else if (sb=="11"){
					sbStr = "十一月"
				}else if (sb=="12"){
					sbStr = "十二月"
				}
				return sbStr;
			},
			selectDate(str) {
				let dStr = str.substring(0,4) + '-' + str.substring(4,6);
				uni.$emit('selectDate', dStr);
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.container{
	height: 100vh;
	background-color: #fff;
	text-align: center;
	
	.years {
		padding-top: 20px;
		
		.title{
			color: #575757;
			font-size: 28rpx;
		}
		
		.months{
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 10rpx;
			
			.mDiv {
				padding: 5px;
				color: #C1C1C1;
				
				.tip{
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}
				.num{
					font-size: 20rpx;
				}
			}
			.dn{
				display: none;
			}
			.show{
				color: #575757;
			}
			.active{
				background-color: #4484FF;
				border-radius: 8rpx;
				color: #fff;
				margin: 0 20px;
			}
		}
	}
}
</style>
